<template>
  <div>
    <div>
      <a-tabs hideAdd :tabBarGutter='8'
              :type="tabType"
              v-model:activeKey="data.activeKey"
              @edit="onEdit"
              @change=clickMultiTab>
          <a-tab-pane v-for="(tab,index) in data.pages" :key="tab.fullPath" >
              <template v-slot:tab >
                    <a-dropdown :trigger= "['contextmenu']">
                        <template v-slot:overlay>
                            <a-menu>
                                <a-menu-item @click="onCloseThat(tab,index)">
                                    关闭当前标签
                                </a-menu-item>
                                <a-menu-item @click="onCloseRight(tab,index)">
                                    关闭右侧
                                </a-menu-item>
                                <a-menu-item @click="onCloseLeft(tab,index)">
                                    关闭左侧
                                </a-menu-item>
                                <a-menu-item @click="onCloseAll(tab,index)">
                                    关闭全部
                                </a-menu-item>
                            </a-menu>
                        </template>
                        <span>{{tab.name}}</span>
                    </a-dropdown>
                </template>
          </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { defineComponent, reactive, watch, inject, computed } from 'vue'
import { cloneDeep } from 'lodash'

export default defineComponent({

    props: {
        selectedKeys: {
            type: Object,
            immediate: true
        }
    },

    setup (props, { emit }) {
        const message = inject('$message')
        const data = reactive({
            activeKey: 'card',
            fullPathList: [],
            pages: [],
            tabType: '',
            tabBarStyle: {
                background: '#FFF',
                margin: 0,
                paddingLeft: '16px',
                paddingTop: '1px'
            }
        })

        // 首次进入需加入路由
        const route = useRoute()
        data.pages.push(cloneDeep(route))
        data.fullPathList.push(route.fullPath)
        selectedLastPath()
        function selectedLastPath () {
            data.activeKey = data.fullPathList[data.fullPathList.length - 1]
        }

        // 监听内容menuLayout传值
        watch(() => props.selectedKeys, (value) => {
            if (value && Array.isArray(value)) {
                data.activeKey = value[0]
            }
        })

        // 替换路由
        const router = useRouter()
        watch(() => data.activeKey, (nv) => {
            if (nv) {
                router.push({ path: nv })
            }
        })

        // 监听路由变化
        onBeforeRouteUpdate((nv, ov) => {
            data.activeKey = nv.fullPath
            if (data.fullPathList.indexOf(nv.fullPath) < 0) {
                data.fullPathList.push(nv.fullPath)
                data.pages.push(cloneDeep(nv))
            }
        })

        const tabType = computed(() => {
            return data.pages.length === 1 ? 'card' : 'editable-card'
        })

        // 按钮点击事件
        function clickMultiTab (value) {
            if (!value) {
                throw new Error('数据异常！！')
            }
            data.activeKey = value
            emit('ChangeActiveKey', data.activeKey)
        }

        // 关闭当前标签
        function onCloseThat (item, index) {
            removeAction(index)
        }
        // 关闭所有标签
        function onCloseAll (item, index) {
            const action = data.pages.filter((name) => {
                return data.activeKey === name.fullPath
            })[0]
            data.fullPathList = [action.fullPath]
            data.pages = [action]
            emit('ChangeActiveKey', action.fullPath)
        }
        // 关闭右边标签
        function onCloseRight (item, index) {
            if (data.pages.length < index + 2) {
                message.error('右侧没有标签')
            } else {
                data.fullPathList.splice(index + 1, 1)
                data.pages.splice(index + 1, 1)
                emit('ChangeActiveKey', data.activeKey)
            }
        }
        // 关闭左边标签
        function onCloseLeft (item, index) {
            if (index - 1 < 0) {
                message.error('左侧没有标签')
            } else {
                data.fullPathList.splice(index - 1, 1)
                data.pages.splice(index - 1, 1)
                emit('ChangeActiveKey', data.activeKey)
            }
        }
        // 页签删除
        function onEdit (targetKey, action) {
            if (action === 'remove') {
                let index = 0
                data.fullPathList.forEach((item, i) => {
                    if (item === targetKey) {
                        index = i
                    }
                })
                removeAction(index)
            }
        }
        // 移除标签
        function removeAction (index) {
            if (data.pages.length === 1) {
                message.info('这是最后一个标签了, 无法被关闭')
                return
            }
            const closedUrl = data.fullPathList.splice(index, 1)
            const actions = data.fullPathList.filter((name) => {
                return data.activeKey === name
            })
            data.pages.splice(index, 1)
            if (data.fullPathList.length > 0) {
                // 判断是否关闭当前页
                console.log(closedUrl[0], data.activeKey, 'url')
                if (actions.length < 1) {
                    if (index === 0) {
                        const item = data.fullPathList[0]
                        emit('ChangeActiveKey', item)
                    } else {
                        const item = data.fullPathList[index - 1]
                        emit('ChangeActiveKey', item)
                    }
                }
            } else {
                emit('ChangeActiveKey', '')
            }
        }

        return {
            data,
            clickMultiTab,
            onCloseThat,
            onCloseAll,
            onCloseRight,
            onCloseLeft,
            onEdit,
            tabType
        }
    }
})
</script>
<style scoped>

.font-12 {
    font-size: 12px;
}

</style>
